<!--  -->
<script setup>
import { ref, computed, reactive, watch } from "vue";
import { NButton, NCarousel, NSkeleton } from "naive-ui";
import store from "@/store";
import { findBrand } from "@/api/category";
import { findBanner } from "@/api/home";

let list = ref(store.state.category.list || null);

let brand = reactive({
  id: 0,
  name: "品牌",
  children: [{ id: "brand", name: "品牌推荐" }],
  brands: [],
});

watch(
  () => store.state.category.list,
  (newVal) => {
    list.value = store.state.category.list.map((item) => {
      return {
        id: item.id || null,
        name: item.name,
        children: (item.children && item.children.slice(0, 2)) || null,
        goods: item.goods || null,
      };
    });
    list.value.push(brand);
  },
  {
    immediate: true,
  }
);

// 获取品牌数据
findBrand(6).then((result) => {
  brand.brands = result;
});

// 轮播图
let bannerImg = reactive([]);
findBanner().then((res) => {
  bannerImg.push(...res);
});
</script>

<template>
  <div class="bg">
    <div class="container" style="position: relative; overflow: hidden">
      <n-skeleton
        height="500px"
        width="1240px"
        v-if="bannerImg.length <= 0"
      ></n-skeleton>
      <!-- 轮播图组件 -->
      <HomeCarousel :list="list" :bannerImg="bannerImg" v-else></HomeCarousel>
    </div>
  </div>
  <div class="container">
    <!-- 新鲜好物 -->
    <HomeNew />
    <!-- 热门推荐 -->
    <HomeHot />
  </div>
  <div class="bg">
    <!-- 热门品牌 -->
    <HomeBrand />
  </div>
  <div class="container">
    <!-- 新鲜好物 -->
    <HomeProduct />
  </div>
  <div class="bg">
    <!-- 最新专题 -->
    <HomeSpecial />
  </div>
</template>

<style lang='less' >
</style>